<template>
  <div>
    <el-dialog v-model="dialogVisible" title="配置" width="50%">
      <el-form
        style="min-width: 700px"
        :model="dialogLists"
        label-width="120"
        class="demo-ruleForm"
        status-icon
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="任务id：" prop="id" name="id">
              <span>{{ dialogLists.id }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="任务名称：" prop="name" name="name">
              <span>{{ dialogLists.name }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="执行频率" prop="frequency" name="frequency">
              <el-radio-group v-model="dialogLists.frequency">
                <el-radio value="H" size="large">小时</el-radio>
                <el-radio value="D" size="large">日</el-radio>
                <el-radio value="M" size="large">月</el-radio>
                <el-radio value="Y" size="large">年</el-radio>
                <el-radio value="S" size="large">停止</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="执行月：" prop="month" name="month">
              <el-select
                v-model="dialogLists.month"
                placeholder="请选择月份"
                style="width: 240px"
                :disabled="dialogLists.frequency != 'Y'"
              >
                <el-option
                  v-for="item in monthOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="执行日：" prop="day" name="day">
              <el-select
                v-model="dialogLists.day"
                placeholder="请选择月份"
                style="width: 240px"
                :disabled="
                  dialogLists.frequency == 'H' ||
                  dialogLists.frequency == 'S'
                "
              >
                <el-option
                  v-for="item in dayOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="执行时间：" prop="date" name="date">
              <el-time-picker
                v-model="dialogLists.date"
                type="datetime"
                placeholder="请选择时间"
                format="HH:mm:ss"
                value-format="HH:mm:ss"
                :disabled="dialogLists.frequency == 'S'"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="onSubmit"> 保存 </el-button>
          <el-button @click="cancel">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script  setup>
import { ref, defineExpose, defineProps, watch } from 'vue'
const dialogVisible = ref(false)
const dialogLists = ref({
  id: '',
  name: '',
  frequency: 'M',
  month: '',
  day: '',
  date: ''
})
const props = defineProps({
  dialogList: Object
})
const monthOptions = ref([])

const dayOptions = ref([])

watch(
  () => props.dialogList,
  (val) => {
    dialogLists.value.id = val.id
    dialogLists.value.name = val.exetype
    dialogLists.value.frequency = val.exefrequency
    dialogLists.value.month = val.month
    dialogLists.value.day = val.exeday
    dialogLists.value.date =
      (val.exehour.toString().length > 1
        ? val.exehour
        : '0' + props.dialogList.exehour) +
      ':' +
      (val.exeminute.toString().length > 1
        ? val.exeminute
        : '0' + val.exeminute) +
      ':' +
      (val.exesecond.toString().length > 1
        ? val.exesecond
        : '0' + val.exesecond)
  },
  { immediate: true }
)
const getList = () => {
  for (let i = 1; i <= 12; i++) {
    monthOptions.value.push({
      id: i,
      name: i
    })
  }
  for (let i = 1; i <= 28; i++) {
    dayOptions.value.push({
      id: i,
      name: i
    })
  }
}
// 保存
const onSubmit = () => {
  dialogVisible.value = false
  console.log(dialogLists.value)
}
// 取消
const cancel = () => {
  dialogVisible.value = false
  dialogLists.value.id = props.dialogList.id
  dialogLists.value.name = props.dialogList.name
  dialogLists.value.frequency = props.dialogList.frequency
  dialogLists.value.month = props.dialogList.month
  dialogLists.value.day = props.dialogList.day
  dialogLists.value.date = props.dialogList.date
}
defineExpose({
  dialogVisible
})
getList()
</script>

<style lang="scss" scoped>
.button_row {
  text-align: center;
  margin-top: 30px;
}
</style>
